let handle = document.getElementById('handle')
let stop = document.getElementById('stop')
// let log = document.getElementById('log-area')
let bg = chrome.extension.getBackgroundPage()

// 持久化开关状态
let switchStatus = localStorage.getItem('switchStatus') || '0'
let storeSetting = localStorage.getItem('setting')
var setting = null
const switchInput = document.getElementById('mySwitch')
const slider = document.querySelector('.slider')
const checkbox = document.querySelector('input[type="checkbox"]') 
const switchText = document.querySelector('.switch-text')
const inputDom = document.getElementsByTagName('input')
const selectDom = document.getElementsByTagName('select')
console.log(storeSetting)
if (storeSetting) {
  setting =  storeSetting === 'undefined' ? null : JSON.parse(storeSetting) 
  console.log(1,setting);
  inputDom[0].value = setting.total
  inputDom[1].value = setting.price
  inputDom[2].checked = setting.type === '买入'
  inputDom[3].checked = setting.type === '卖出'
  selectDom[0].value = setting.period
}

switchText.innerHTML = switchStatus === '0' ? '关' : '开'
switchInput.checked = switchStatus === '0' ? false : true
slider.addEventListener('click', function() {
  if (switchStatus === '0') {
    switchText.innerHTML = '开'
    switchInput.checked = false
    switchStatus = '1'
    // 执行searcBtn脚本
    setting = {
      period: selectDom[0].value,
      total: inputDom[2].value,
      price: inputDom[3].value,
      type: inputDom[0].checked ? '买入' : '卖出',
    }
    if (setting.price === '') {
      $('#place').before('<li style="color: red;">请输入电价范围</li>')
      return
    }
    if (setting.total === '') {
      $('#place').before('<li style="color: red;">请输入预计摘牌总电量</li>')
      return
    }
    chrome.tabs.query({
      active: true,
      currentWindow: true,
    }, (tabs) => {
      chrome.scripting.executeScript({
        args: [setting],
        target: { tabId: tabs[0].id },
        func: (setting) => {
          runHandler(setting)
        }
      })
    })
  } else {
    switchText.innerHTML = '关'
    switchInput.checked = true
    switchStatus = '0'
    $('#log-ul li:not(:last)').remove()
    chrome.tabs.query({
      active: true,
      currentWindow: true,
    }, (tabs) => {
      chrome.scripting.executeScript({
        target: { tabId: tabs[0].id },
        func: () => {
          stopExecute()
        }
      })
    })
  }
  localStorage.setItem('setting', JSON.stringify(setting))
  localStorage.setItem('switchStatus', switchStatus)
})

document.getElementById('buy-radio').addEventListener('click', function() {
  console.log('买买买')

  let params = {
    period: selectDom[0].value,
    type: inputDom[0].checked ? '买入' : '卖出',
  }
  chrome.tabs.query({
    active: true,
    currentWindow: true,
  }, (tabs) => {
    chrome.scripting.executeScript({
      args: [params],
      target: { tabId: tabs[0].id },
      func: (params) => {
        handlerTip(params)
      }
    })
  })
})


document.getElementById('sale-radio').addEventListener('click', function() {
  console.log('卖卖卖')
  $('#tip').empty()
})


// handle.addEventListener('click', (event) => {
//   const inputDom = document.getElementsByTagName('input')
//   const selectDom = document.getElementsByTagName('select')
//   var setting = {
//     period: selectDom[0].value,
//     priceMin: inputDom[0].value,
//     priceMax: inputDom[1].value
//   }
//   const errDom = document.getElementsByClassName('err-msg')[0]
//   if (inputDom[0].value > inputDom[1].value) {
//     errDom.innerHTML = '电价最小值不能大于电价最大值'
//     errDom.style.display = 'block'
//   } else {
//     errDom.style.display = 'none'
//   }

//   chrome.tabs.query({
//     active: true,
//     currentWindow: true,
//   }, (tabs) => {
//     chrome.scripting.executeScript({
//       args: [setting],
//       target: { tabId: tabs[0].id },
//       func: (setting) => {
//         searchBtn(setting)
//       }
//     })
//   })
// })

// stop.addEventListener('click', (event) => {
//   chrome.tabs.query({
//     active: true,
//     currentWindow: true,
//   }, (tabs) => {
//     chrome.scripting.executeScript({
//       args: [],
//       target: { tabId: tabs[0].id },
//       func: () => {
//         if (intervalID) {
//           clearInterval(intervalID)
//           console.log('任务停止')
//         } else {
//           Toast('没有在执行的任务')
//         }
//       }
//     })
//   })
//   $('#place').before('<li style="color: red;">任务被手动停止</li>')
//   gotoBottom()
// })

chrome.runtime.onMessage.addListener((data, sender, response) => {
  console.log(data)
  if (data.type === 'info') {
    $('#place').before('<li>' + data.msg + '</li>')
  }else if (data.type === 'success') {
    $('#place').before('<li style="color: green;">' + data.msg + '</li>')
  }else if (data.type === 'error') {
    $('#place').before('<li style="color: red;">' + data.msg + '</li>')
  }else if (data.type === 'tip') {
    $('#tip').append('<span style="color: red">最大可买量为：' + data.msg + '</span>')
  }
  gotoBottom()
})
function gotoBottom() {
  let scrollHeight = $('#log-ul').prop('scrollHeight')
  if (scrollHeight > $('#log-ul').prop('clientHeight')) {
    $('#log-ul').scrollTop(scrollHeight, 200)
  }
}

